<template>
  <div class="login">
    <h1>欢迎来到花语轩</h1>
    <div class="main">
      <div class="signUp">
        <span @click="goToSignUp()">Sign Up</span>
      </div>
      <div class="signIn">
        <div class="deadline">Sign In</div>
        <el-form ref="loginForm" :model="loginForm" class="login_form" auto-complete="on" :rules="loginRules">
          <el-form-item prop="account">
            <el-input v-model="loginForm.userName" placeholder="请输入账号"></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="warning" @click="signIn()">SIGN IN</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";
import { setToken } from '@/utils/auth';
export default {
  data() {
    return {
      loginForm: {
        userName: "",
        password: "",
      },
      loginRules: {
        userName: [
          { required: true, message: "账号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    goToSignUp() {
      this.$router.push({ path: "/register" }).catch((err) => err);
    },
    signIn() {
      
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        // setToken(res.data.token);
        
        
        this.$router.push({ path: '/' })
        
      }).catch(() => {
        
      })




      /* login(this.loginForm).then((res) => {
        // console.log("登陆成功");
        console.log(res);
        setToken(res.data.token);
        commit('SET_NAME', res.data.userName
        )
        this.$message({
          message: "登录成功",
          type: "success",
        });
        this.$router.push('/')
        // console.log(res.data.token);
      }); */
    },
  },
};
</script>

<style lang="scss">
.login {
  background-color: #884e22;
  // height: 100%;
  height: 1000px;

  h1 {
    padding-top: 50px;
    color: #ffffff;
    font-size: 56px;
    margin-bottom: 50px;
  }

  .main {
    height: 700px;
    width: 40%;
    margin: auto;
    background-color: #ffffff;

    .signUp {
      text-align: right;
      color: #009ffb;
      font-size: 36px;
      margin-bottom: 100px;
      margin-right: 10px;

      span {
        cursor: pointer;
      }
    }

    .deadline {
      font-size: 50px;
      margin-bottom: 40px;
    }

    .signIn {
      .login_form {
        .el-input__inner {
          margin-left: 20px;
          width: 90%;
        }
      }

      .el-button {
        margin-top: 50px;
        width: 70%;
        height: 70px;
      }
    }
  }
}
</style>